<section class="auth-page anime-zoom-in">
  <mat-card class="auth-card" [ngClass]="{ 'anime-wobble': errorMessage }">
    <mat-card-header>
      <mat-card-title>Sign In</mat-card-title>
    </mat-card-header>
    <mat-card-content>
      <form [formGroup]="formGroup" (ngSubmit)="submit(formGroup)">
        <mat-divider></mat-divider>
        <!-- Email input -->
        <mat-form-field appearance="outline">
          <mat-label>Enter your email</mat-label>
          <input matInput formControlName="email" autofocus />
          <mat-error *ngIf="formGroup.get('email').hasError('required')">
            You must enter a value
          </mat-error>
          <mat-error *ngIf="formGroup.get('email').hasError('pattern')">
            Must be an email
          </mat-error>
          <mat-error
            *ngIf="formGroup.get('email').hasError('mustNotBeRejected')"
          >
            Incorrect email
          </mat-error>
        </mat-form-field>
        <!-- Password input -->
        <mat-form-field appearance="outline">
          <input
            matInput
            formControlName="password"
            [type]="hidePassword ? 'password' : 'text'"
          />
          <mat-label>Enter your password</mat-label>
          <button
            type="button"
            *ngIf="!isLoading"
            mat-icon-button
            matSuffix
            (click)="hidePassword = !hidePassword"
          >
            <mat-icon>
              {{ hidePassword ? 'visibility_off' : 'visibility' }}
            </mat-icon>
          </button>
          <mat-error *ngIf="formGroup.get('password').hasError('required')">
            You must enter a value
          </mat-error>
          <mat-error
            *ngIf="formGroup.get('password').hasError('mustNotBeRejected')"
          >
            Incorrect password
          </mat-error>
        </mat-form-field>
        <!-- Form validation -->
        <mat-divider></mat-divider>

        <div class="button-group">
          <mat-progress-bar
            *ngIf="isLoading"
            mode="indeterminate"
          ></mat-progress-bar>
          <button
            *ngIf="!isLoading"
            mat-raised-button
            color="primary"
            type="submit"
            [disabled]="!formGroup.valid"
          >
            Submit
          </button>
          <button
            type="button"
            *ngIf="!isLoading"
            mat-raised-button
            color="accent"
            routerLink="/auth/signup"
          >
            Sign Up
          </button>
        </div>
        <!-- Error -->
        <mat-error *ngIf="errorMessage" class="submit-error">
          {{ errorMessage | json }}
        </mat-error>
      </form>
    </mat-card-content>
  </mat-card>
</section>
